<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<%@include file="/pages/manager/common.jsp" %>
</head>
<body>

</body>
<script type="text/javascript">
Ext.onReady(function(){
	Ext.define("Province", {
        extend: "Ext.data.Model",
        fields: [
            { name: "id" },
            { name: "name" },
            { name: "age" },
            { name: "phone" },
        ]
    });
	var store = Ext.create("Ext.data.JsonStore", {
        pageSize: pageSize, // 分页大小
        model: "Province",
        proxy: {
            type: "ajax",
            url: "/example/gridStore",
            reader: {
                type: "json",
                rootProperty:"root", // >> extjs4 -- > root
                totalProperty: "total"
            }
        }
    });
	store.loadPage(1);
	var grid = Ext.create("Ext.grid.Panel", {
        //renderTo: Ext.getBody(),
        region: 'center',
        frame: true,
        height: parent.window.viewHight,
        width: '100%',
        store: store,
        scroll : false,
        border : 0,
        id : 'userGrid',
        columnLines : true,
        selModel:new Ext.selection.CheckboxModel({checkOnly:true}),
        columns: [
            {	
            	header : '序号',
            	width : '7%',
            	renderer : function(value,metadata,record,rowIndex){
            		return rowIndex + 1;
            	}
            },
            { header: "ID",   width: '7%',dataIndex: "id", sortable: true },
            { header: "姓名", width: '20%',dataIndex: "name", sortable: true },
            { header: "年龄", width: '20%', dataIndex: "age", sortable: true },
            { header: "电话", width: '45%', dataIndex: "phone", sortable: true },
        ],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                text: '添加数据',
                cls : 'default-btn',
                listeners : {
                	click : function(button,e,opts){
                		Ext.formReset(operationForm,this);
                	}
                }
            },{
                text: '修改数据',
                cls : 'default-btn',
                listeners : {
                	click : function(button,e,opts){ 
                		Ext.formReset(operationForm,this);
                	}
                }
            },{
                text: '删除数据',
                cls : 'default-btn',
                listeners : {
                	click : function(button,e,opts){
                		Ext.formCollapse(operationForm);
                		Ext.MessageBox.confirm('提示', '确认删除此条记录?', function(id){
							if(id == 'yes'){
								Ext.formShowProgress();
			        			setTimeout(function(){
			        				Ext.formHideProgress();
			        			},3000);
							}
						});
                	}
                }
            },
            {
            	xtype:"fieldcontainer" , 
            	layout:"hbox" , 
            	items:[
		             {xtype:"textfield",id : 'keywords',emptyText:'按登录名称模糊查询', flex:1} , 
		             {
		            	 xtype:"button",
		            	 cls : 'search-btn',
		            	 iconCls : 'search',
		            	 listeners : {
		                 	click : function(button,e,opts){
		                 	}
		                 }
		             }        
	            ]
            }]
        }],
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: '显示{0}-{1}条，共{2}条',
            emptyMsg: "没有数据"
        })
    });
	
	var operationForm = Ext.create("Ext.form.Panel", {
		height: parent.window.viewHight,
		width : 300,
	    method : 'GET',
	    region: 'east',
	    id: 'operationForm',
	    collapsible: true,  //可折叠
	    collapsed: true,
	    hideCollapseTool: true,
	    titleCollapse : false,
	    autoScroll: false,   //自动创建滚动条
	    defaultType: 'textfield',
	    defaults: {
	        anchor: '100%',
	    },
	    listeners: {
	    	collapse: function(){
	    		this.setTitle('');	
	    	}
	    },
	    fieldDefaults: {
	        labelWidth: 80,
	        labelAlign: "left",
	        flex: 1,
	        margin: 10
	    },
	    items: [
	            { xtype: "hidden", name: "tbUser.id",id: "id", fieldLabel: "id", allowBlank: true},
                { xtype: "textfield", name: "tbUser.userName",id: "userName", fieldLabel: "姓名", allowBlank: false,width:500 },
                { xtype: "numberfield", name: "tbUser.name",id: "name",  fieldLabel: "年龄", decimalPrecision: 0,width:500 },
                { xtype: "textfield", name: "tbUser.passWord",id: "passWord",  fieldLabel: "密码", decimalPrecision: 0,width:500,inputType: 'password', },
                { xtype: "textfield", name: "tbUser.gender",id: "gender",  fieldLabel: "性别", allowBlank: true, width:500  },
                { xtype: "numberfield",name: "tbUser.age",id: "age",  fieldLabel: "年龄", allowBlank: true, width:500 },
                { xtype: "textfield", name: "tbUser.telephone",id: "telephone",  fieldLabel: "联系电话", allowBlank: true, width:500 },
                { xtype: "textfield", name: "tbUser.address",id: "address",  fieldLabel: "家庭住址", allowBlank: true, width:500 }
	    ],
	    buttons: [
	        { 
	        	xtype: "button", 
	        	text: "取消", 
	        	listeners : {
	        		click : function(){
	        			
	        			operationForm.toggleCollapse(true);
	        		}
	        	}
	        },
	        { 
	        	xtype: "button", 
	        	text: "保存",
	        	listeners : {
	        		click : function(){
	        			Ext.formShowProgress();
	        			setTimeout(function(){
	        				Ext.formHideProgress();
	        			},3000);
	        		}
	        	}
	        }
	    ]
	});
	
	// >> 布局
	var win = Ext.create("Ext.Window", {
		width : '100%',
		height: parent.window.viewHight,
		draggable : false,
		closable : false,
		layout : 'border',
		renderTo : Ext.getBody(),
		resizable : false,
		autoScroll : false,
		buttonAlign : 'center',
		closeAction : 'hide',
		border : 0,
		frame :false,
		listeners :{
		},
		items: [grid,operationForm]
	});
	win.show();

});
</script>
</html>
